<template>
	<view class="nx-page">
		<!-- 头部 -->
		<view class="nx-page-header" v-if="customHeader" :class="headerClass">
			<!-- 状态栏 -->
			<view :style="{ height: statusBarHeight + 'px', backgroundColor: statusBarBg }">
				<slot name="nxStatusBar"></slot>
			</view>
			<!-- 头部内容 -->
			<view :style="{ height: headerHeight + 'px'}">
				<slot name="header"></slot>
			</view>
		</view>
		<!-- 头部占位 -->
		<view v-if="customHeader" class="nx-custom-bar" :style="{ height: statusBarHeight + headerHeight + 'px'}">
		</view>
		<!-- 主体 -->
		<view class="nx-page-body" :class="{ 'nx-customBody': customBody }" :style="{ backgroundColor: bgColor }">
			<slot></slot>
		</view>
		<!-- 底部 -->
		<view class="nx-page-footer" v-if="customFooter">
			<slot name="footer"></slot>
		</view>
		<!-- 底部占位 -->
		<view v-if="customFooter" class="nx-custom-bar"
			:style="{ height: footerSafeHeight + footerHeight + 'px', backgroundColor: bgColor }"></view>
	</view>
</template>
<script>
	import {
		getStatusBarHeight
	} from '../utils/index.js'
	export default {
		name: 'nx-page',
		props: {
			customHeader: {
				type: Boolean,
				default: false,
			},
			headerClass: {
				type: String,
				default: '',
			},
			customBody: {
				type: Boolean,
				default: false,
			},
			customFooter: {
				type: Boolean,
				default: false,
			},
			headerHeight: {
				type: Number,
				default: 45
			},
			footerHeight: {
				type: Number,
				default: 45
			},
			statusBarBg: {
				type: String,
				default: '#f7f7f7',
			},
			bgColor: {
				type: String,
				default: '#f7f7f7',
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				footerSafeHeight: 0,
			}
		},
		mounted() {
			// 获取系统信息
			let app = uni.getSystemInfoSync();
			this.statusBarHeight = getStatusBarHeight()
			console.log(this.statusBarHeight)
			this.footerSafeHeight = app.safeAreaInsets.bottom
		},
		methods: {},
		computed: {}
	}
</script>
<style scoped lang="scss">
	.nx-page {
		height: 100%;
		width: 100%;
		max-width: 750rpx;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}

	.nx-page-header {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
	}

	.nx-page-body {
		flex: 1;
		display: flex;
		background-color: $theme-bg;
	}

	.nx-customBody {
		overflow: auto;
	}

	.nx-page-footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: $uni-white;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1); // 添加上阴影
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}

	.nx-custom-bar {
		flex-shrink: 0;
		width: 100%;
	}
</style>